<template>
	<!-- 筛选 -->

	<!-- 	<view class="filtrate-box" :style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}"
		v-if="filtrateShow">
	
		<view class="aside">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
					@tap.stop="selectJobType(index)">{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="conter">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
					
				</view>
				<view :class="['dropdown-item',currentFiltrateConterIndex.indexOf(item.name) != -1 ?'on':'']"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex.indexOf(item.name) != -1)?activeColor:itemTextColor}"
					v-for="(item,index) in filtrateConterArr" :key="index" @tap.stop="selectJobName(item)">{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="acea-row row-middle row-between filtrate-btn">
			<view class="reset" @tap.top="filtrateReset()">重置</view>
			<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
		</view> -->

	<tkiTree ref="tree" :range="filtrateArr" titleColor="#ee212d" rangeKey="name" confirmColor="#ee212d" :multiple="multiple"
		@confirm="treeConfirm"  @cancel="filtrateShow=false" />
	</view>
</template>

<script>
	import {
		getPositionListApi
	} from '@/api/recruit.js'
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			multiple: {
				type: Boolean,
				default: false
			}
		},
		components:{
			tkiTree
		},
		data() {
			return {
				filtrateShow: false,
				show: true,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: [],
				// 筛选数组
				filtrateArr: [{
					name: '为您推荐',
					id: 0
				}, ],
				filtrateConterArr: [],
			}
		},
		mounted() {
			this.getList()
		},
		watch: {
			filtrateShow(val){
				if(val){
					this.$refs.tree._show();
				}
				
			}
		},
		methods: {
			async getList() {
				try {
					let {
						data
					} = await getPositionListApi();
					this.filtrateArr = data
					this.filtrateConterArr = this.filtrateArr[0].children;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//选择职位
			// selectJobName(item) {
			// 	if (this.currentFiltrateConterIndex.indexOf(item.name) != -1) {
			// 		const ind = this.currentFiltrateConterIndex.indexOf(item.name);
			// 		this.currentFiltrateConterIndex.splice(ind, 1)
			// 	} else {
			// 		if (this.multiple) return this.currentFiltrateConterIndex.push(item.name);
			// 		this.currentFiltrateConterIndex[0] = item.name
			// 	}
			// 	this.$forceUpdate()
			// },
			// //选择职位类别
			// selectJobType(index) {
			// 	this.currentFiltrateAsideIndex = index;
			// 	this.filtrateConterArr = this.filtrateArr[index].children;
			// },
			// //重置
			// filtrateReset() {
			// 	this.currentFiltrateAsideIndex = 0;
			// 	this.currentFiltrateConterIndex = [];
			// },
			//点击确认
			filtrateConfirm(data) {
				// this.$emit('input', data.currentFiltrateConterIndex.join(','));
				console.log("data.names.join(',')",data.names.join(','))
				this.$emit('input', data.names.join(','));
				this.$emit('change',data)
				this.filtrateShow = false
			},
			treeConfirm(data){
				console.log('data',data)
				let ids = [];
				let names = [];
				data.forEach(item=>{
					ids.push(item.id);
					names.push(item.name);
				})
				this.filtrateConfirm({
					currentFiltrateConterIndex:ids,
					names
				})
			},
			
		}
	}
</script>

<style scoped>
	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		width: calc(100% - 200rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>